<template>
  <div class="cccc">
    <!-- 小导航 -->
    <div class="container animated flipInX">
      <hr class="hr1" />
      <ul class="nav nav-pills font_c">
        <li class="">
          <a class="" href="#" @click="quanbu">全部分类:</a>
        </li>
        <li class="">
          <a class="" href="#" @click="hong_se">蛋糕</a>
        </li>
        <li class=" ">
          <a class="" href="#">冰激凌</a>
        </li>
        <li class="">
          <a class="" href="#">咖啡下午茶</a>
        </li>
        <li class="">
          <a class="" href="#">常温蛋糕</a>
        </li>
        <li class="">
          <a class="" href="#">面包</a>
        </li>
      </ul>
      <ul class="nav nav-pills font_c">
        <li class="">
          <a class="" href="#">全部口味: </a>
        </li>
        <li class="">
          <a class="" href="#">奶油</a>
        </li>
        <li class=" ">
          <a class="" href="#">慕斯</a>
        </li>
        <li class="">
          <a class="" href="#">巧克力</a>
        </li>
        <li class="">
          <a class="" href="#">乳酪</a>
        </li>
        <li class="">
          <a class="" href="#">冰激凌</a>
        </li>
        <li class="">
          <a class="" href="#">咖啡</a>
        </li>
        <li class="">
          <a class="" href="#">水果</a>
        </li>
      </ul>
      <hr class="hr_2" />
    </div>
    <div class="container sc_coco" v-if="flag_h">
      <div class="" v-for="(val, index) in red_h" :key="index">
        <a class="">
          <img class="img_sc" :src="val.img"  @click="mtk(val.img, val.name, val.price)"
          data-toggle="modal"
          data-target="#exampleModal" alt="" />
        </a>
        <p class="a_p2">{{ val.name }}</p>
        <span class="a2">新品</span>
        <span class="a2">生日</span>
        <p>{{ val.price }}</p>
        <button
          @click="mtk(val.img, val.name, val.price)"
          data-toggle="modal"
          data-target="#exampleModal"
        >
          {{ val.btnn }}
        </button>
        <div :class="val.img_xinpin">
          <img :src="val.img1" alt="" />
        </div>
      </div>
    </div>

    <div class="container sc_coco" v-if="flag_h">
      <div class="" v-for="(val, index) in sp_fl.red_h1" :key="index">
        <a class="">
          <img class="img_sc" :src="val.img"  @click="mtk(val.img, val.name, val.price)"
          data-toggle="modal"
          data-target="#exampleModal" alt="" />
        </a>
        <p class="a_p2">{{ val.name }}</p>
        <span class="a2">新品</span>
        <span class="a2">生日</span>
        <p>{{ val.price }}</p>
        <button
          @click="mtk(val.img, val.name, val.price)"
          data-toggle="modal"
          data-target="#exampleModal"
        >
          {{ val.btnn }}
        </button>
        <div :class="val.img_xinpin">
          <img :src="val.img1" alt="" />
        </div>
      </div>
    </div>
    <div class="container sc_coco" v-if="flag_h">
      <div class="" v-for="(val, index) in sp_fl.red_h2" :key="index">
        <a class="">
          <img class="img_sc" :src="val.img"  @click="mtk(val.img, val.name, val.price)"
          data-toggle="modal"
          data-target="#exampleModal" alt="" />
        </a>
        <p class="a_p2">{{ val.name }}</p>
        <span class="a2">新品</span>
        <span class="a2">生日</span>
        <p>{{ val.price }}</p>
        <button
          @click="mtk(val.img, val.name, val.price)"
          data-toggle="modal"
          data-target="#exampleModal"
        >
          {{ val.btnn }}
        </button>
        <div :class="val.img_xinpin">
          <img :src="val.img1" alt="" />
        </div>
      </div>
    </div>

    <!-- 商品 -->
    <div class="container sc_coco" v-if="flag_zong">
      <div class="" v-for="(val, index) in msg" :key="index">
        <a  class="">
          <img class="img_sc" :src="val.img" alt=""  @click="mtk(val.img, val.name, val.price)"
          data-toggle="modal"
          data-target="#exampleModal" />
        </a>
        <p class="a_p2">{{ val.name }}</p>
        <span class="a2">新品</span>
        <span class="a2">生日</span>
        <p>{{ val.price }}</p>
        <button
          @click="mtk(val.img, val.name, val.price)"
          data-toggle="modal"
          data-target="#exampleModal"
        >
          {{ val.btnn }}
        </button>
        <div :class="val.img_xinpin">
          <img :src="val.img1" alt="" />
        </div>
      </div>
    </div>

    <div class="container sc_coco" v-if="flag_zong">
      <div class="" v-for="(val, index) in msg1" :key="index">
        <a  class="">
          <img class="img_sc" :src="val.img" alt=""  @click="mtk(val.img, val.name, val.price)"
          data-toggle="modal"
          data-target="#exampleModal" />
        </a>
        <p class="a_p2">{{ val.name }}</p>
        <span class="a2">新品</span>
        <span class="a2">生日</span>
        <p>{{ val.price }}</p>
        <button
          @click="mtk(val.img, val.name, val.price)"
          data-toggle="modal"
          data-target="#exampleModal"
        >
          {{ val.btnn }}
        </button>
        <div :class="val.img_xinpin">
          <img :src="val.img1" alt="" />
        </div>
      </div>
    </div>

    <div class="container sc_coco" v-if="flag_zong">
      <div class="" v-for="(val, index) in msg2" :key="index">
        <a  class="">
          <img class="img_sc" :src="val.img" alt=""  @click="mtk(val.img, val.name, val.price)"
          data-toggle="modal"
          data-target="#exampleModal" />
        </a>
        <p class="a_p2">{{ val.name }}</p>
        <span class="a2">新品</span>
        <span class="a2">生日</span>
        <p>{{ val.price }}</p>
        <button
          @click="mtk(val.img, val.name, val.price)"
          data-toggle="modal"
          data-target="#exampleModal"
        >
          {{ val.btnn }}
        </button>
        <div :class="val.img_xinpin">
          <img :src="val.img1" alt="" />
        </div>
      </div>
    </div>

    <div class="container sc_coco" v-if="flag_zong">
      <div class="" v-for="(val, index) in msg3" :key="index">
        <a  class="">
          <img class="img_sc" :src="val.img" alt=""  @click="mtk(val.img, val.name, val.price)"
          data-toggle="modal"
          data-target="#exampleModal" />
        </a>
        <p class="a_p2">{{ val.name }}</p>
        <span class="a2">新品</span>
        <span class="a2">生日</span>
        <p>{{ val.price }}</p>
        <button
          @click="mtk(val.img, val.name, val.price)"
          data-toggle="modal"
          data-target="#exampleModal"
        >
          {{ val.btnn }}
        </button>
        <div :class="val.img_xinpin">
          <img :src="val.img1" alt="" />
        </div>
      </div>
    </div>

    <div class="container sc_coco" v-if="flag_zong">
      <div class="" v-for="(val, index) in msg4" :key="index">
        <a>
          <img class="img_sc" :src="val.img" alt=""  @click="mtk(val.img, val.name, val.price)"
          data-toggle="modal"
          data-target="#exampleModal" />
        </a>
        <p class="a_p2">{{ val.name }}</p>
        <span class="a2">新品</span>
        <span class="a2">生日</span>
        <p>{{ val.price }}</p>
        <!-- // -->
        <button
          @click="mtk(val.img, val.name, val.price)"
          data-toggle="modal"
          data-target="#exampleModal"
        >
          {{ val.btnn }}
        </button>
        <div :class="val.img_xinpin">
          <img :src="val.img1" alt="" />
        </div>
      </div>
    </div>

    <!-- Modal -->
    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">商品信息</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col-md-4 bgc-big">
                  <img :src="img_ii" class="card-img-top" alt="..." />
                </div>
                <div class="col-md-1"></div>
                <div class="clear_fix col-md-7">
                  <button class="btn_1">❤</button>
                  <div class="xinxin">
                    <p>★★★★☆<span>4星</span></p>
                  </div>
                  <h5 class="title f_left">
                    <span>{{ namee }}</span>
                    <!---->
                    <p>
                      Curabitur non nulla sit amet nisl tempus convallis qui
                      aclectus。
                    </p>
                  </h5>
                  <div class="price_wrap f_right ">
                    <p class="new_price">
                      <span>{{ pr_icee }}</span>
                    </p>
                    <!---->
                    <!---->
                    <!---->
                  </div>
                </div>

                <!-- 右边布局 -->
                <div class=" right_font">
                  <div class="title_wrap clear_fix">
                    <!---->
                    <a href="" class="aha_entrance">
                      <img
                        src="//newimgcdn.lapetit.cn/web/images/aha/aha_link.png?2019112001"
                        alt=""
                      />
                    </a>
                    <div class="leng_d">
                      <span>❄</span>
                      <span class="zzz">保鲜条件：0-4℃冷藏，5℃食用最佳</span>
                    </div>
                    <!---->
                  </div>
                </div>
                <br />
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <div class="you">
              <span @click="del()">
                -
              </span>
              <input
                type="text"
                name="zjia"
                id="txt"
                v-model="val_ue"
                @change="kog"
                oninput="value=value.replace(/[^\d]|^[0]/g,'')"
              />
              <span @click="add()">
                + </span
              >&nbsp;
              <button
                class="btn_2"
                data-dismiss="modal"
                aria-label="Close"
                @click="btn_buy"
              >
                <router-link to="">
                  立即购买
                </router-link>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.hr1 {
  margin-top: 10px;
}
.btn_2 a{
  color: #fff;
  text-decoration: none;
}
.font_c li a {
  font-size: 15px;
  color: #684029;
  margin-left: 13px;
}
.font_c li a:hover {
  color: #bb9772;
}
.font_c {
  margin-top: -7px;
}
.hr_2 {
  margin-top: 28px;
}
.img_sc {
  width: 228px;
  height: 246px;
}
.a_p2 {
  margin: auto;
  color: #684029;
  font-size: 16px;
  text-align: center;
}
.sc_coco {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.sc_coco .a2 {
  border: 1px solid #d5bfa7;
  border-radius: 100px;
  padding: 0px 7px 0 8px;
  color: #d5bfa7;
  margin: 3px 3px;
  font-size: 12px;
}
.img_xinpin {
  position: absolute;
  top: 10px;
}
.img_xinpin img {
  width: 60px;
  height: 20px;
}
.sc_coco p {
  color: #a88866;
  font-size: 16px;
}
.sc_coco button {
  width: 70px;
  height: 24px;
  font-size: 12px;
  //background-color: powderblue;
  border: 0px solid;
  background: #d49a5b;
  color: #fff;
  padding: 0 5px;
  float: right;
  margin-top: -34px;
  outline: none;
}
.sc_coco button:hover {
  background: #a17e59;
}
.sc_coco div button a {
  color: #fff;
  text-decoration: none;
}
.bgc-big img {
  width: 100%;
  height: 150px;
  margin-top: 6px;
}
.new_price,
.taste_left {
  font-size: 16px;
  color: #816b4e;
}
.aha_entrance img {
  width: 445px;
}
.btn_1 {
  margin-top: 7px;
  background-color: #fff;
  border: 1px solid #eee;
  color: pink;
}
.btn_2 {
  width: 100px;
  height: 48px;
  font-size: 16px;
  background-color: #634832;
  border: 1px solid #eee;
  color: rgb(255, 255, 255);
  padding-top: 5px;
  margin-right: 15px;
  position: relative;
  top: -6px;
}
.xinxin p {
  background-color: #fff;
  color: #816b4e;
  font-size: 20px;
}
.xinxin span {
  font-size: 16px;
  background-color: #fff;
  color: #c58181;
  margin: -2px 0 0 5px;
}
.f_left span {
  font-size: 16px;

  color: #816b4e;
}
.f_left p {
  margin-top: 7px;
  font-size: 16px;

  color: #816b4e;
}
.you {
  padding-left: 3px;
}
.you span {
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 40px;
  height: 49px;
  border: 1px solid #f0f2f3;
  background-color: #fff;
  transition: 0.3s;
}
.you input {
  background-color: #fff;
  outline: none;
  width: 50px;
  height: 49px;
  text-align: center;
  border: 1px solid #f0f2f3;
}
.cheng_fen h5 {
  font-weight: bold;
  margin-top: 13px;
  font-size: 16px;
}
.cheng_fen h5 span {
  margin-top: 10px;
  margin-left: 20px;
  color: #ac8585;
}
.leng_d {
  font-size: 24px;
  color: rgb(113, 238, 238);
}
.zzz {
  margin: -10px 0 0 20px;
  font-size: 14px;
  color: #665e5e;
}
.footer_xx {
  margin-top: 80px;
  text-align: center;
   background-color: #855648;
}
</style>
<script>
export default {
  data() {
    return {
      val_ue: 1,
      img_ii: "",
      namee: "",
      pr_icee: "",
      flag_h: false,
      flag_zong: true,
      arr: [],
      str: "",
      msg:[],
      msg1:[],
      msg2:[],
      msg3:[],
      msg4:[],
      red_h:[],
      sp_fl:{},
    };
  },
  methods: {
    mtk(img_i, name, pr_ice) {
      this.img_ii = img_i;
      this.namee = name;
      this.pr_icee = pr_ice;
    },
     kog(){
      if(this.val_ue==""){
        this.val_ue=1
      }
    },
    del: function() {
      if (this.val_ue == 1) {
        this.val_ue = 1;
      } else {
        this.val_ue--;
      }
    },
    add() {
      this.val_ue++;
    },
    hong_se() {
      this.flag_h = true;
      this.flag_zong = false;
    },
    quanbu() {
      this.flag_h = false;
      this.flag_zong = true;
    },
  
    btn_buy() {
       var obj = {};
     
      //  this.arr = localStorage.getItem("yh") ? localStorage.getItem("yh") : [];
      //   if (this.arr.length != 0) {
      //       this.arr = JSON.parse(this.arr);
      //   }
      //   // 图片路径
      obj.imglj = this.img_ii;
      //   // 价钱
      var price_buy = parseInt(this.pr_icee.substring(1));
      obj.jiaqwb = price_buy;
      //   // 商品名
      obj.shangpmwb = this.namee;
      //   // 数量
      this.val_ue = parseInt(this.val_ue);

      obj.shuliang = this.val_ue;
      obj.stat =false
      obj.total= this.val_ue*price_buy
      this.$store.commit("add", obj);

      for (var j = 0; j < this.$store.state.arr.length; j++) {
        for (var i = j + 1; i < this.$store.state.arr.length; i++) {
          if (this.$store.state.arr[i].shangpmwb ==this.$store.state.arr[j].shangpmwb) {
            this.$store.state.arr[j].shuliang =this.$store.state.arr[j].shuliang + obj.shuliang;
            this.$store.state.arr.splice(i, 1);
            i--;
          }
        }
      }
      if(localStorage.getItem("username")==""){
        alert("您还没有登录哟")
      }else{
          this.$axios.post('http://47.114.130.21:3001/shop','shop_id='+String(localStorage.getItem("key"))
     + '&buy_img=' +String(this.img_ii) + '&buy_price='+parseInt(this.pr_icee.substring(1))
     + '&buy_sname=' +String(this.namee) +'&buy_number=' +parseInt(this.val_ue)
      +'&buy_stat=' +(false) +'&buy_total=' +parseInt(this.val_ue*price_buy))
     .then((data) =>{
        //console.log(data);
        if(data.data.code =="200"){
          alert(data.data.msg)
         
        //    var da_ta=JSON.stringify(data.data.sdata);
        //  localStorage.setItem("dat", da_ta)
        }else if(data.data.code=="404"){
          alert(data.data.msg)
        }
      })
      }
     
     

    }
  },
  mounted(){
    this.$axios.get('http://47.114.130.21:3001/bbbb').then((data)=>{
      this.msg=JSON.parse(data.data[0].msg) 
      this.msg1=JSON.parse(data.data[0].msg1) 
      this.msg2=JSON.parse(data.data[0].msg2) 
      this.msg3=JSON.parse(data.data[0].msg3) 
      this.msg4=JSON.parse(data.data[0].msg4) 
      this.red_h=JSON.parse(data.data[0].red_h) 
      this.sp_fl=JSON.parse(data.data[0].sp_fl) 
    })
  
  },
};
</script>
